<template>
  <div class="wrapper">
    <div class="left">
      <sidebar />
    </div>
    <div class="right">
      <mapContainer style="background-color: black; background-image:url('../image/bg_image.jpg') " @loadeds=""></mapContainer>
<!--      <Map :componentName="componentName"></Map>-->
      <router-view />
    </div>
  </div>
</template>

<script>
import sidebar from "../../src/components/sideBar";
import mapContainer from "../../src/components/mapContainer";
import Map from "./Map"
export default {
  name: "App",
  data() {
    return {
      componentName: 'CesiumContainer'
    }
  },
  components: {
    sidebar,
    Map,
    mapContainer
  },
  mounted(){
    // document.getElementsByClassName("right")[0].style.width = document.body.clientWidth - 200 + 'px'
  }
};
</script>

<style>
  html,body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
  }
.wrapper {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #2c3e50;
  height: 100%;
  width: 100%;
  display: flex;
}
.right {
  width: 100%;
  /*width: auto;*/
  background-color: #99a9bf;
}
.left {
  background-color: rgba(0,25,46,1);
  width: 200px;
  overflow-y:scroll;
  /*overflow-x:visible*/
  overflow-x: hidden;
  scrollbar-arrow-color:#ffd04b;
  scrollbar-base-color:red
}

.left::-webkit-scrollbar {/*滚动条整体样式*/
  width: 10px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.left::-webkit-scrollbar {/*滚动条整体样式*/
  width: 5px;     /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}

.left::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  background: #ffd04b;
}

.left::-webkit-scrollbar-track {/*滚动条里面轨道*/
  -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
  border-radius: 10px;
  background: #EDEDED;
}

</style>
